<template>
	<view class="announcement-box" v-if="announcement">
		<view class="icon">

		</view>
		<view class="text">{{Title}}</view>
		<view class="close" @click="close">
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				announcement: true,
				Title: "",
				//背景色
				bgColor: "#fff",
				//文本色
				textColor: "#2A2D2E"
			}
		},
		mounted() {
			this.getList()
		},
		onShow() {
			this.getSetting()
		},
		methods: {
			getSetting() {
				uni.request({
					url: "/api/index/getSetting",
					method: "POST"
				}).then(res => {
					document.documentElement.style.setProperty('--bg-color', res.data.data.theme_color);
					document.documentElement.style.setProperty('--text-color', res.data.data.font_color);
				})
			},
			getList() {
				let data = {
					select: 0,
					num: 1
				}
				uni.request({
					url: "/api/index/notic",
					method: "POST",
					data: data
				}).then(res => {
					// console.log(res);
					this.Title = res.data.data[0].content
				})
			},
			close() {
				this.announcement = false
			}
		}
	}
</script>
<style type="text/css">
	@import url("@/static/icon/style.css");
</style>
<style lang="scss" scoped>
	:root {
		--bg-color: ;
		--text-color: ;
	}

	.announcement-box {
		width: 100%;
		height: 10vw;
		// margin-top: 3vw;
		display: flex;

		.icon {
			width: 10vw;
			height: 10vw;
			display: flex;
			font-size: 5vw;
			justify-content: left;
			align-items: center;
			font-family: "icomoon";
			color: var(--text-color);
		}

		.icon::before {
			content: "\e917";
		}

		.text {
			width: calc(100% - 20vw);
			height: 10vw;
			line-height: 10vw;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			color: var(--text-color);
			font-size: 3.5vw;
		}

		.close {
			width: 10vw;
			height: 10vw;
			display: flex;
			justify-content: right;
			align-items: center;
			font-family: "icomoon";
			font-size: 5vw;
			color: var(--text-color);
		}

		.close::before {
			content: "\e908";
		}
	}
</style>